<template>
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        ref="search"
        :formProp="formData"
        @search="
          searchData => {
            search(searchData, 3);
          }
        "
        @change="searchChange"
        :isShowSearch="isShowSearch"
        class="ccui-highsearch"
        :selectClear="true"
      >
        <div class="ccui-tab-wrapper">
          <el-button
            :type="isActive === index ? 'table-top-active' : 'table-top'"
            size="mini"
            v-for="(item, index) in focuses"
            :key="index"
            @click="tabChange(item.focus)"
          >
            <template v-if="item.focus === 'all-item' && totalNum !== null"
              >全部{{ isActive === 0 ? `(${totalNum})` : "" }}
            </template>
            <template
              v-else-if="item.focus === 'un-submitted' && totalNum !== null"
              >待提交{{ isActive === 1 ? `(${totalNum})` : "" }}
            </template>
            <template
              v-else-if="item.focus === 'under-approval' && totalNum !== null"
              >审批中{{ isActive === 2 ? `(${totalNum})` : "" }}
            </template>
            <template
              v-else-if="item.focus === 'return-approval' && totalNum !== null"
              >审批退回{{ isActive === 3 ? `(${totalNum})` : "" }}
            </template>
          </el-button>
        </div>
        <div class="ccui-extend-btn">
          <el-button
            size="mini"
            type="primary"
            icon="icon-ccui-add-sup"
            @click="handleGoNew"
            >新增
          </el-button>
        </div>
        <template slot="search">
          <el-input
            v-model="formData.orderName"
            clearable
            searchLabel="订单名称"
            placeholder="请输入订单名称模糊查询"
            @blur="handleTrim('orderName')"
          />
          <el-input
            v-model="formData.orderNoAccurate"
            clearable
            searchLabel="订单编号"
            placeholder="请输入订单编号模糊查询"
          />
          <el-input
            v-model="formData.thirdCategoriesOfName"
            clearable
            searchLabel="分类名称"
            placeholder="请输入分类名称模糊查询"
            @blur="handleTrim('thirdCategoriesOfName')"
          />

          <el-input
            v-model="formData.partyBName"
            clearable
            searchLabel="供应商"
            placeholder="请输入供应商模糊查询"
          />

          <el-date-picker
            v-model="formData.orderDeliveryTime"
            :clearable="false"
            align="right"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            searchLabel="订单发出时间"
            value-format="timestamp"
          />
          <!-- <el-select
                      v-model="formData.bizStatus"
                      placeholder="请选择"
                      clearable
                      searchLabel="订单状态"
                    >
                      <el-option
                        v-for="item in bizStatusSearch"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select> -->
        </template>
        <!-- 表单高级搜索 -->
        <el-input
          v-model="formData.orderName"
          clearable
          searchLabel="订单名称"
          placeholder="请输入订单名称模糊查询"
          slot="searchItem1"
          @blur="handleTrim('orderName')"
        />
        <el-input
          v-model="formData.orderNoAccurate"
          clearable
          searchLabel="订单编号"
          placeholder="请输入订单编号模糊查询"
          slot="searchItem2"
        />
        <el-input
          v-model="formData.thirdCategoriesOfName"
          clearable
          searchLabel="分类名称"
          placeholder="请输入分类名称模糊查询"
          slot="searchItem3"
          @blur="handleTrim('thirdCategoriesOfName')"
        />
        <el-input
          v-model="formData.partyBName"
          clearable
          searchLabel="供应商"
          placeholder="请输入供应商模糊查询"
          slot="searchItem4"
        />

        <el-date-picker
          v-model="formData.orderDeliveryTime"
          :clearable="false"
          align="right"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          searchLabel="订单发出时间"
          slot="searchItem5"
          value-format="timestamp"
        />

        <!-- <el-select
                  v-model="formData.bizStatus"
                  placeholder="请选择"
                  clearable
                  searchLabel="订单状态"
                  slot="searchItem6"
                >
                  <el-option
                    v-for="item in bizStatusSearch"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
      </el-search>
    </div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :fit="true"
        border
        class="ccui-multifunctional-table"
        max-height="20000"
        @cell-click="cellClick"
        :cell-style="cellStyle"
      >
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :formatter="formatterList[table.formatterName]"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
          ></el-table-column>
        </template>

        <el-table-column label="操作" width="50" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="true"
              size="mini"
              type="text"
              @click="handleRevoke(scope.row)"
              >撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="ccui-table-footer" v-show="isShowPagination">
        <div id="ccui-paging">
          <el-pagination
            :total="totalNum"
            :page-size="pageSizeCode"
            :current-page="pageNoCode"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            popper-class="ccui-paging-page-size-popper"
            @size-change="
              val => {
                handleSizeChange(val, 3);
              }
            "
            @current-change="
              val => {
                handleCurrentChange(val, 3);
              }
            "
          />
          <el-button
            class="ccui-pagination-btn"
            size="mini"
            type="default"
            @click="handleSizeChange('none')"
            >确定
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import orderEntryMixins from "../mixins/orderEntryMixins";

export default {
  name: "under-approval",
  mixins: [orderEntryMixins],
  data() {
    return {
      isActive: 2
    };
  },
  methods: {
    // 撤回方法
    handleRevoke(r) {
      let objMessage = {
        title: "提示信息",
        content: "确定要撤销吗?",
        confirmButtonText: "确定",
        loadingMessage: "撤销中,请稍等..."
      };
      let params = {
        id: r.id,
        isShowLoading: true,
        loadingMessage: objMessage.loadingMessage
      };
      this.deleteMessageBox(objMessage, params, 3, this.enteringRevokeApproval);
    }
  },
  activated() {
    this.pageSizeCode = 10;
    this.pageNoCode = 1;
    this.$refs.search.resetForm();
    this.$refs.search.handleChange(0);
    this.formDataSearch = {};
    this.getList({}, 3);
  }
};
</script>

<style scoped lang="scss">
/*.ccui-tab-wrapper {*/
/*  padding-top: 0px !important;*/
/*}*/

/deep/ .el-searchs-box {
  width: 406px !important;
}
</style>
